<template>
  <a-modal :visible="visible" :destroyOnClose="true" title="新增实物" @cancel="visible = false" @ok="hanleSubmit" centered :width="800">
    <a-form-model ref="rulesForm" :model="form" :rules="rules" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-form-model-item label="类型" prop="entityType" required>
        <a-radio-group name="radioGroup" v-model="form.entityType">
          <a-radio :value="1">内部商品</a-radio>
          <a-radio :value="2">外部商品</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="款号" prop="voucherId">
        <a-input v-model="form.voucherId" placeholder="最多50个字符" :max-length="50" />
      </a-form-model-item>
      <a-form-model-item label="名称" prop="entityName">
        <a-input v-model="form.entityName" placeholder="最多30个字符" :max-length="30" />
      </a-form-model-item>
      <a-form-model-item label="份数" prop="voucherNumber">
        <a-input-number v-model="form.voucherNumber" placeholder="请输入" :min="0" :max="100" />
      </a-form-model-item>
      <a-form-model-item label="图片" required>
        <JImageUpload :uploadParams="getUploadParams()" :fileSize="2" :accept="'image/*'" :isMultiple="false" @fileChange="fileImageChange" v-model="imgList"></JImageUpload>
        <div>建议比例1:1，支持jpg, png格式，2M以内</div>
        <p class="tip" v-show="showTip && form.imgList.length == 0">请上传图片</p>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import globalData from '@/assets/js/common'
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
export default {
  components: { JImageUpload },
  data() {
    return {
      visible: false,
      labelCol: { lg: { span: 5 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      form: {
        imgList: []
      },
      rules: {
        entityType: [{ required: true, message: '请选择' }],
        voucherId: [{ required: true, message: '请输入活动名称，最多50个字符', trigger: 'blur' }],
        entityName: [{ required: true, message: '请输入活动名称，最多30个字符', trigger: 'blur' }],
        voucherNumber: [{ required: true, message: '请输入' }]
      },
      imgList: [],
      showTip: false
    }
  },
  methods: {
    show(arg) {
      if (arg) {
        this.form = arg
        this.imgList = arg.image
      } else {
        this.form = {
          imgList: []
        }
        this.imgList = []
      }

      this.visible = true
    },
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    fileImageChange(list) {
      this.form.imgList = list.length > 0 ? list : []
    },
    hanleSubmit() {
      this.$refs.rulesForm.validate(valid => {
        if (this.form.imgList.length == 0) {
          this.showTip = true
          return
        } else {
          this.showTip = false
        }
        if (valid && !this.showTip) {
          console.log(this.form)
          let formValue = this.form
          formValue.image = this.form.imgList[0].url
          formValue.rewardType = 2
          delete formValue.imgList
          this.$emit('handleAddGoods', [formValue])
          this.visible = false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.tip {
  color: #f5222c;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: -1px;
}
</style>

